<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters" ref="filters" :rules="rules">
				<el-form-item>
					<el-button type="primary" @click="payFace">充值面额</el-button>
					<el-button type="primary" @click="ratio">充值比例设置</el-button>
					<el-button type="primary" @click="systemGive" v-if="false">系统赠送</el-button>
					<el-button type="primary" @click="systemBuckle" v-if="false">系统代扣</el-button>
				</el-form-item>
				<el-form-item prop="date">
					<el-date-picker
						v-model="filters.date"
						range-separator="至"
						type="datetimerange"
						placeholder="选择时间范围">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="交易类型" prop="trade">
					<el-select v-model="filters.trade" clearable>
						<el-option label="交易人ID" value="1"></el-option>
						<el-option label="交易人昵称" value="2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="" prop="input" v-if="!filters.trade == ''">
					<el-input v-if="filters.trade == '1'" v-model="filters.input" placeholder="交易人ID"></el-input>
					<el-input v-if="filters.trade == '2'" v-model="filters.input" placeholder="交易人昵称"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="getRechargeList">查找</el-button>
				</el-form-item>
			</el-form>
		</el-col>
		
		<!--列表-->
		<el-table :data="rechargeList" highlight-current-row v-loading="listLoading" style="width: 100%;" :default-sort = "{prop: 'id'}">
			<el-table-column prop="id" label="序号" align="center">
			</el-table-column>
			<el-table-column prop="tradeNo" label="交易单号" align="center">
			</el-table-column>
			<el-table-column prop="tradeUserId" label="充值人ID" align="center">
			</el-table-column>
			<el-table-column prop="tradeNickname" label="充值人昵称" align="center">
			</el-table-column>
			<el-table-column prop="amount" label="充值金额" align="center">
			</el-table-column>
			<el-table-column prop="infundTime" label="充值时间" align="center">
			</el-table-column>
		</el-table>
		<!--工具条-->
		<div class="toolbar" style="display: flex;justify-content: flex-end;">
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="currentPage"
				:page-sizes="[10, 20, 30, 40]"
				:page-size="size"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total">
			</el-pagination>
		</div>
		<!--充值面额弹出框-->
		<el-dialog title="充值面额" :visible.sync="dialogPayFace" size="tiny" @close="XdialogPayFace">
			<div class="add-wrap" v-if="show">
				<p>充值金额</p>
				<p><el-input v-model="input1"></el-input></p>
				<p @click="payData">添加</p>
			</div>
			<el-button :disabled="show" type="primary" @click="show = true;">新增</el-button>
			<div class="add-wrap" v-for="(item,index) in arr">
				<p>{{index + 1}}</p>
				<p><el-input :value="item" readOnly="readOnly"></el-input></p>
				<p @click="payDelate(index)">删除</p>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogPayFace = false">取 消</el-button>
				<el-button type="primary" @click="submitPayFace">确 定</el-button>
			</div>
		</el-dialog>
		<!--充值比例弹出框-->
		<el-dialog title="充值比例设置" :visible.sync="dialogRatio" size="tiny">
			<el-col :span="24">
				<el-col :span="6"><el-input placeholder="RMB: 余额" disabled></el-input></el-col>
				<el-col :span="6" :push="2"><el-input placeholder="1" v-model="rmb" disabled></el-input></el-col>
				<el-col :span="6" :push="4"><el-input placeholder="1" v-model="yuan" disabled></el-input></el-col>
			</el-col>
			<el-col :span="24" style="margin-top: 20px;">
				<el-col :span="6" :push="8">
					{{rmb}}RMB={{yuan}}元余额
				</el-col>
			</el-col>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogRatio = false">取 消</el-button>
				<el-button type="primary" @click="submitRatio">确 定</el-button>
			</div>
		</el-dialog>
		<!--系统赠送弹出框-->
		<el-dialog title="系统赠送" :visible.sync="dialogSystemGive" size="tiny">
			<el-form :model="systemGiveForm" ref="systemGiveForm" :rules="rule">
				<el-form-item label="用户ID/手机号" label-width="140px" prop="ID">
					<el-input v-model="systemGiveForm.ID" placeholder="请输入用户ID" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="赠送金额" label-width="140px" prop="money">
					<el-input v-model.number="systemGiveForm.money" placeholder="输入整数金额，0~999999" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogSystemGive = false">取 消</el-button>
				<el-button type="primary" @click="submitSystemGive('systemGiveForm')">确 定</el-button>
			</div>
		</el-dialog>
		<!--系统代扣弹出框-->
		<el-dialog title="系统代扣" :visible.sync="dialogystemBuckle" size="tiny">
			<el-form :model="systemBuckleForm" ref="systemBuckleForm" :rules="rule">
				<el-form-item label="用户ID/手机号" label-width="140px" prop="ID">
					<el-input v-model="systemBuckleForm.ID" placeholder="请输入用户ID" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="赠送金额" label-width="140px" prop="money">
					<el-input v-model.number="systemBuckleForm.money" placeholder="输入整数金额，0~999999" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogystemBuckle = false">取 消</el-button>
				<el-button type="primary" @click="submitSystemBuckle('systemBuckleForm')">确 定</el-button>
			</div>
		</el-dialog>
	</section>
</template>

<script>
	import { getRechargeList, denominationSetup, denominationList, giveFund, reduceFund } from '@/api/api';
	export default {
		data() {
			let reg =  /^[1-9]\d{0,4}$/
			let validateInput = (rule, value, callback) => {
				if (!value) {
					callback(new Error('不能为空'));
				} else {
					callback();
				}
			};
			let validateNumber = (rule, value, callback) => {
				if (!value) {
					callback(new Error('不能为空'));
				} else if(!reg.test(value)) {
					callback(new Error('输入合法金额'));
				} else {
					callback();
				}
			};
			return {
				show: false,
				arr: [],
				arr2: [],
				obj: {},
				input1: '',
				cunt: 0,
				rmb: '1',
				yuan: '1',
				filters: {
					date: '',
					trade: '',
					input: ''
				},
				start: '',
				end: '',
				rules: {
					input: [
						{validator: validateInput, trigger: 'blur' }
					]
				},
				rechargeList: [],
				total: 0,
				size: 10,
				currentPage: 1,
				listLoading: false,
				// 充值面额弹出框
				dialogPayFace: false,
				// 充值比例弹出框
				dialogRatio: false,
				// 系统赠送弹出框
				dialogSystemGive: false,
				systemGiveForm: {
					ID: '',
					money: ''
				},
				//充值面额列表
				amountList:[],
				// 系统代扣弹出框
				dialogystemBuckle: false,
				systemBuckleForm: {
					ID: '',
					money: ''
				},
				rule: {
					ID: [
						{required: true, message: '不能为空', trigger: 'blur'}
					],
					money: [
						{required: true, validator: validateNumber, trigger: 'change'},
					],
				}
			}
		},
		methods: {
			getTime() {
				let starttime,endtime = ''
				let time = this.filters.date;
				if(!time[0] == '') {
					starttime = this.moment(time[0]).format('YYYY-MM-DD HH:mm:ss');
				}
				if(!time[1] == '') {
					endtime = this.moment(time[1]).format('YYYY-MM-DD HH:mm:ss');
				}
				if(starttime == "Invalid date"){
					starttime="";
				};
				if(endtime == "Invalid date"){
					endtime="";
				};
				this.start = starttime
				this.end = endtime
			},
			//获取充值明细列表
			getRechargeList()  {
				this.getTime();
				let para = {
					pageIndex: this.currentPage,
					pageSize: this.size,
				}
				if(!this.start == '') {
					para.startTime = this.start
				}
				if(!this.end == '') {
					para.endTime = this.end
				}
				
				if(!this.filters.trade == '') {
					para.type = this.filters.trade
					if(this.filters.trade == 1) {
						para.userId = this.filters.input.replace(/\s/g, "")
					}
					if(this.filters.trade == 2) {
						para.nickName = this.filters.input.replace(/\s/g, "")
					}
				}
				getRechargeList(para).then((res) => {
					console.log(res);
					this.rechargeList = res.data.data
					this.total = res.data.totalCount
				})
			},
			
			payFace() {
				// 充值面额
				this.dialogPayFace = true
				this.getAmountList();
			},
			
			payData() {
				if(!this.input1 == "") {
					this.arr.push(this.input1)
					this.$message({
				        message: '添加成功',
				        type: 'success'
			        });
			        this.input1 = ''
				}
			},
			payDelate(index) {
				this.arr.splice(index,1)
				this.$message({
				    message: '删除成功',
				    type: 'success'
			        });
			},
			submitPayFace() {
				// 充值面额确定
				denominationSetup({amount:this.arr}).then((res) => {
					this.arr = res.data
					this.dialogPayFace = false;
					this.show = false
				});
			},
			XdialogPayFace() {
				this.show = false
				this.arr = [];
			},
			ratio() {
				// 充值比例
				this.dialogRatio = true
			},
			submitRatio() {
				console.log(this.ac)
			},
			systemGive() {
				// 点击系统赠送
				this.dialogSystemGive = true
			},
			//赠送余额
			submitSystemGive(systemGiveForm) {
				this.$refs[systemGiveForm].validate((valid) => {
					if(valid) {
						let para = {
							userIdOrPhone: this.systemGiveForm.ID,
							amount: parseInt(this.systemGiveForm.money)
						}
						
						giveFund(para).then((res) => {
							this.dialogSystemGive = false
							this.getRechargeList()
						})
					}
				})
			},
			systemBuckle() {
				// 点击系统代扣
				this.dialogystemBuckle = true
			},
			//代扣余额
			submitSystemBuckle(systemBuckleForm) {
				this.$refs[systemBuckleForm].validate((valid) => {
					if(valid) {
						let para = {
							userIdOrPhone: this.systemBuckleForm.ID,
							amount: parseInt(this.systemBuckleForm.money)
						}
						reduceFund(para).then((res) => {
							this.dialogystemBuckle = false
							this.rechargeList = res.data
						})
					}
				})
			},
			//充值面额列表
			getAmountList(){
				denominationList({}).then((res) => {
					this.arr = res.data.amount;
				})
			},
			// 分页详情
			handleSizeChange(val) {
				this.size = val;
				this.getRechargeList();
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.getRechargeList();
			}
		},
		mounted() {
			this.getRechargeList();
		}
	}

</script>

<style scoped>
	.add-wrap {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		margin-bottom: 10px;
	}
	.add-wrap p:nth-of-type(1) {
		border: 1px solid #bfcbd9;
		border-radius: 4px;
		height: 34px;
		line-height: 34px;
		width: 100px;
		text-align: center;
	}
	.add-wrap p:nth-of-type(3) {
		border-radius: 4px;
		order: 1px solid #20a0ff;
		padding: 10px 40px;
		background-color:#20a0ff;
		color: #fff;
		cursor: pointer;
	}
</style>
